<template>
	<div class="shop-info">
		<div class="img-box">
			<img v-lazy="goodsInfo.shopLogo" v-if="goodsInfo.shopLogo"/>
			<svg-icon class="icon" iconName="taobao" v-else-if="goodsInfo.shoptype === 0"></svg-icon>
			<svg-icon class="icon" iconName="tmall" v-else="goodsInfo.shoptype === 1"></svg-icon>
		</div>
		<div class="shop-detail">
			<h2>{{ goodsInfo.shopName }}</h2>
			<!--<a>进入店铺</a>-->
			<div class="score" v-if="goodsInfo.descScore || goodsInfo.serviceScore || goodsInfo.shipScore">
				<p v-if="goodsInfo.descScore">
					宝贝描述<span>{{ goodsInfo.descScore }}</span>
				</p>
				<p v-if="goodsInfo.serviceScore">
					卖家服务<span>{{ goodsInfo.serviceScore }}</span>
				</p>
				<p v-if="goodsInfo.shipScore">
					物流服务<span>{{ goodsInfo.shipScore }}</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'ShopInfo',
	props: {
		goodsInfo: {
			type: Object
		}
	}
};
</script>

<style lang="scss" scoped>
.shop-info {
	display: flex;
	padding: 34px;
	background: $color-white;
	margin-top: 10px;
	.img-box {
		width: 92px;
		height: 92px;
		border-radius: 16px;
		overflow: hidden;
		@include flexBox(center, center);
		img {
			max-width: 100%;
			max-height: 100%;
		}
	}
	.shop-detail {
		margin-left: 20px;
		color: $text-black;
		font-size: 28px;
		flex: 1;
		@include flexBox(space-around, null, column);
		h2 {
			font-weight: 600;
		}
		.score {
			display: flex;
			p {
				margin-right: 20px;
				span {
					color: $color-red;
					margin-left: 4px;
				}
			}
		}
		a {
			padding: 4px 16px;
			color: $main-color;
			border: 1px solid $main-color;
			border-radius: 50px;
			transition: 0.5s;
			&:hover {
				background: $main-color;
				color: $color-white;
			}
		}
	}
}
</style>
